<template>
  <div :class="{'showline': showLine}" class="select-tab">
    <div v-for="(item,index) in tabArr" :key="index" @click="selectTab(index)" :class="{'tab-active': item.selected}" class="tab-nav">{{item.label}}</div>
  </div>
</template>

<script>
/**
 * 头部tab选择
 */
export default {
  data() {
    return {
      seleIndex: 0,
    }
  },
  props: {
    tabArr: {
      type: Array,
      default() {
        return []
      }
    },
    showLine: {
      type: Boolean,
      default: false
    }
  },
  methods: {
    selectTab(i){
      this.seleIndex = i
      this.$emit('selectTab',i)
    }
  }
}
</script>
<style lang="stylus" scoped>
.select-tab{
  width 100%;
  margin 0 auto;
  display: flex;
  flex-flow row nowrap;
  align-items center;
  justify-content space-around;
  height 44px;
  background:rgba(255,255,255,1);
  .tab-nav{
    font-size:14px;
    font-family:PingFangSC-Regular;
    font-weight:400;
    color:rgba(102,102,102,1);
    height 44px;
    line-height 44px;
  }
  .tab-active{
    font-weight:500;
    color:rgba(4,48,102,1);
    position relative;
    &::after{
      position absolute;
      content: '';
      bottom 0;
      left 50%;
      transform: translateX(-50%);
      width:50px;
      height:2px;
      background:rgba(4,48,102,1);
      z-index 10
    }
  }
}
.showline{
  position relative;
  &::after{
    position absolute;
    bottom 0;
    left: 0;
    content: '';
    height:1px;
    width:100%;
    background:rgba(216,216,216,1);
  }
}
</style>

